// const userSocket = window.WebSocket;
// const userSocket = localStorage.getItem('userSocket');

const username = localStorage.getItem('username');
let currentFriend = '';



socket = io({
    query: {
        name: username,
        password: localStorage.getItem('password')
    },
    reconnection: false,
});

// 发送消息
send.onclick = function() {
    const sendContent = document.querySelector('#inputContent').value;
    let message = {
        sender: username,
        receiver: currentFriend,
        content: sendContent,
        date: Date.now(),
    }
    socket.emit('sendMessage', message);
}

// 添加朋友
addFriend.onclick = function() {
    const sendContent = document.querySelector('#addUsername').value;
    socket.emit('addFriend', { friendName: sendContent });
}

socket.on('addFriendResult', (addResult) => {
    console.log(`receive message ${addResult}`);
    if (addResult.result == true) {
        alert('添加成功');
        getFriendList();
        return;
    } else {
        alert('添加失败');
        return;
    }
});


function chatInit() {
    getFriendList();
}

chatInit();

function getFriendList() {
    socket.emit('getFriendList');
}
// 监听更新好友列表
socket.on('refreshFriendList', (friendList) => {
        console.log(`refresh friend list ${friendList}`);
        renderFriendList(friendList);
    })
    // 监听更新聊天信息
socket.on('refreshChatContent', (chatContent) => {
    console.log(`refresh ChatContent ${chatContent}`);

    friendName = chatContent.friendName;
    messageHistory = chatContent.messageHistory;
    if (friendName !== currentFriend) {
        console.log(`not current friend ${friendName}`);
        return;
    }
    renderChatMessage(messageHistory);
})

// 渲染好友列表
function renderFriendList(friendList) {
    // 先清空
    const dl = document.querySelector('#friendList');
    dl.innerText = '';

    // 渲染每个好友
    for (let friendName of friendList) {
        const pEL = document.createElement('p');
        pEL.innerText = friendName;

        pEL.addEventListener('click', function() {
            // 点击某个好友
            currentFriend = friendName;
            console.log(`click ${currentFriend}`);

            const dCurrentFriendName = document.querySelector('#currentFriendName');
            dCurrentFriendName.innerText = currentFriend;

            socket.emit('getMessageHistory', {
                friendName: currentFriend
            })
        })

        dl.appendChild(pEL);
    }
}

// 渲染聊天
function renderChatMessage(messageHistory) {
    const dl = document.querySelector('#chatMessageArea');
    dl.innerText = '';


    // 渲染每一条消息
    for (message of messageHistory) {

        const pEL = document.createElement('p');


        const pELvalue = document.createElement('span');

        // 自己的消息
        if (message.sender === username) {
            pEL.innerText = message.content + '  ';
            pELvalue.innerText = message.sender;

            pEL.style.textAlign = 'right';

        } else {
            pEL.innerText = message.sender + '  ';
            pELvalue.innerText = message.content;

            pEL.style.textAlign = 'left';

        }


        pEL.appendChild(pELvalue);
        dl.appendChild(pEL);
    }

}